<template>
	<view class="box">
		<view class="rangeBox">
			<view class="title">
				<span style="font-size: 30rpx;">配送范围设置</span><span
					style="font-size: 26rpx; color:#999999FF ;">（手动滑动选择距离范围）</span>
			</view>
			<view class="start_end">
				<span>0公里</span><span>200公里</span>
			</view>
			<view class="range">
				<view class="ct" :style="styleObject">
					{{select}}公里
				</view>
				<view class="wrap" @click="getValue">
					<u-slider v-model="valueLg" active-color="#6bc665" height="10" @end="endSelect" 
						></u-slider>
				</view>
			</view>
			
		</view>
		<view class="btn" @click="confirm">
			确认
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				select: "10",
				valueLg: 10,
				styleObject: ''
			};
		},
		methods: {
			endSelect(v) {
				this.select = this.valueLg * 2
				this.styleObject={
					transform: `translateX(${this.valueLg*6.7}rpx)`
				}
			},
			
			getValue(){
				setTimeout(()=>{
				this.select = this.valueLg * 2
				this.styleObject={
					transform: `translateX(${this.valueLg*6.7}rpx)`
				}
				},500)
			},
			confirm(){
				// B页面传递：
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]; //上一个页面
				let object={
					meter:this.valueLg*2
				}
				prevPage.onShow(object);
				uni.navigateBack();
				 
				 
				
			}
		}

	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #f5f5f5;
		box-sizing: border-box;
		padding-bottom: 20rpx;
		padding-top: 1rpx;
		min-height: 100vh;
	}

	.rangeBox {
		width: 750rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		margin: 20rpx auto;
		background: #FFFFFF;
		border-radius: 10rpx;

		.title {
			margin-bottom: 20rpx;
		}

		.start_end {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #999999;
			font-size: 26rpx;
			margin-bottom: 20rpx;
		}

		.range {
			position: relative;

			.ct {
				position: absolute;
				top: -60rpx;
				transform: translateX(80rpx);
				z-index: 99;
				background-color: #FFFFFF;
				width: 100rpx;
				text-align: center;
			}
		}
	}
	.btn{
		width: 710rpx;
		height: 76rpx;
		background: #6BC665;
		border-radius: 38rpx;
		text-align: center;
		line-height: 76rpx;
		margin: 40rpx auto;
		color: #FFFFFF;
	}
</style>